<template>
    <div>
        <el-form label-width="0" :model="sendFormData" :rules="rules" :size="customStyle.size" ref="validateNoteForm">
            <el-form-item>
                <h1 class="title">个人日记</h1>
            </el-form-item>
            <el-form-item prop="content">
                <div id="noteWrap"></div>
            </el-form-item>
            <el-form-item>
                <div class="btnWrap">
                    <el-button type="info" :loading="apiLoading" @click="$router.go(-1)">返回</el-button>
                    <el-button type="primary" :loading="apiLoading" @click="handleSubmit">保存</el-button>
                </div>
           </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {setNote,getNote} from '@/api/user'
import E from 'wangeditor'
export default {
    name: "note",
    data(){
        return {
            sendFormData:{
                username:'',
                content:''
            },
            rules:{
                content: [
                    { required:true, trigger: 'blur',message:"请输入日记内容"}
                ],
            }
        }
    },
    created() {
        getNote({username:this.userInfo.username}).then(res=>{
            this.sendFormData.content=res.data || "";
            this.$nextTick(()=>{
                const editor = new E('#noteWrap')
                editor.config.height = 500
                editor.config.onchange = (Html) => {
                    this.sendFormData.content = Html
                }
                editor.create()
                editor.txt.html(this.sendFormData.content)
            })
        })
        this.sendFormData.username=this.userInfo.username
    },
    methods:{
        handleSubmit(){
            this.$refs.validateNoteForm.validate((valid) => {
                if(valid){
                    setNote(this.sendFormData).then(res=>{
                        this.$message.success(res.msg)
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
/*.btnWrap {
    text-align: right;
}*/
>>> .title {
    text-align: center;
    margin:0!important;
}

</style>